@charset "UTF-8";


:root {
    --bg-color1: #fff;
    --bg-color2: #444;
    --bg-color3: #44444466;

    --prin-color1: #f9ee00;
    --sec-color1: #f05723;

    --shadow-color: #00000044;
}

/* estilos gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    font: normal 1rem Arial, helvetica, sans-serif;
}

.btns {
    height: 2.5rem;
    width: 4rem;
    background-color: var(--prin-color1);
    font: bold 1rem Arial, verdana, sans-serif;
    color: var(--bg-color2);
    text-transform: capitalize;
    letter-spacing: .1rem;

    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
}

.btns:hover {
    background-color: var(--bg-color2);
    color: var(--prin-color1);
    border: 1px solid var(--prin-color1);
}

/* cabeçalho da página */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: sticky;
    top: 0;
    left: 0;

    height: 15%;
    padding: 0 10px;
    background-color: var(--bg-color2);
    z-index: 5;
}

.logo-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
}

.logo-img {
    height: 60%;
    width: 100%;
    object-fit: contain;
}

/* menu de navegação */

.open-navmodal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.open-navmodal-btn img {
    color: #000;
}

.close-navmodal-btn {
    position: absolute;
    right: 2%;
    top: 2%;
}

.nav-modal {
    display: none;

    position: absolute;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100vw;
    background-color: var(--shadow-color);
    border: none;
    z-index: 5;
}

.nav-modal.navmodal-active {
    display: block;
}

/* lista de páginas */

.nav-list {
    display: flex;
    flex-direction: column;
    justify-content: stretch;

    height: 100%;
    width: 80%;

    background: #fff;
    list-style: none;
}

.nav-list li {
    height: 10%;
}

.page-element{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    width: 100%;
    color: var(--bg-color2);
    font: bold 1rem Arial;

    text-decoration: none;
}

.page-element:hover {
    background-color: var(--shadow-color);
    color: var(--bg-color1);
}


/* conteúdo principal */

.page-content {
    position: relative;
}

/* carrosel dos produtos destaques */

.carousel {
    position: relative;
    height: 40vh;
    overflow: hidden;
    background-color: var(--bg-color3);
    padding: 10px;
    box-shadow: 0px 5px 20px 2px var(--shadow-color);
}

.slides-container {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

.slide {
    flex: 1 0 100%;
    display: none;
    position: relative;
}

.featured-img {
    height: 80%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.featured-data {
    position: absolute;
    bottom: 1%;
    left: 50%;

    height: 3rem;
    width: 80%;
    text-align: center;
    color: var(--bg-color1);
    background-color: var(--bg-color3);
    transform: translateX(-50%);
    border-radius: 10px;
}

.slide-on {
    display: block;
}

.elements-container {
    display: flex;

    position: absolute;
    bottom: 30%;
    left: 50%;
    
    justify-content: space-between;

    width: 100%;
    transform: translateX(-50%);
}

.prev-slide-btn, .next-slide-btn {
    height: 4rem;
    width: 3rem;
    border: none;
    cursor: pointer;
    background: transparent;
    border-radius: 10px;
    backdrop-filter: blur(30px);
}

.prev-slide-btn {
    left: -10%;
}

.next-slide-btn {
    right: -10%;
}

/* Área de produtos */

.products-titlle {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    height: 3rem;
    padding-left: .5rem;
    font: bolder 1.5rem cursive, Arial, sans-serif;
    letter-spacing: .2rem;
    text-shadow: 5px 5px 10px var(--shadow-color);
}

.products {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    background: var(--bg-color3);
    padding: 5px;
}

.product {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;

    height: 15rem;
    padding: 10px;
    background: center/cover no-repeat;
    backdrop-filter: blur(20px);
    border-radius: 10px;
}

.product-img {
    flex: 1 1 90%;
    position: relative;
    max-height: 90%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
    background-color: var(--bg-color1);
    margin-bottom: .5rem;
}

.product-data {
    flex: 1 1 80%;

    position: absolute;
    top: 50%;
    left: 50%;

    background: var(--bg-color3);
    backdrop-filter: blur(50px);
    width: 80%;
    color: var(--bg-color1);
    padding: 10px;
    border-radius: 10px;
    transform: translateX(-50%);
}

.product-btn {
    height: 10%;
    width: 50%;
    border: none;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
}


/* rodapé da página */

.page-info {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 15%;
    width: 100%;
    padding: 10px;
    background-color: var(--bg-color2);
    color: var(--bg-color1);
}

.page-auth {
    font: bolder .8rem sans-serif;
    text-align: justify;
}

@media (min-width: 600px) and (max-width: 800){
    .product {
        flex: 1 1 50%;
    }
}